<template>
  <div>
    <Row>
      <Col span="24">
        <Form ref="pageData" :model="pageData" :label-width="80" style="width: 600px">
          <FormItem>
            <Row>
              <Col span="9">
                <Input type="text" v-model="pageData.QL_NAME" placeholder="输入事项名称"></Input>
              </Col>
              <Col span="4" offset="1">
                <Button @click="getItemData()">查询</Button>
              </Col>
            </Row>
          </FormItem>
        </Form>
    </Col>
  </Row>
  <Row>
  <Table border :columns="columns6" :data="data5">
  </Table>
  <Row v-if="loadData == true">
    <Col class="demo-spin-col" span="8" offset="8">
      <Spin fix>
        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
        <div>数据正在加载</div>
      </Spin>
    </Col>
  </Row>
      <div style="float: right;margin-top: 10px">
          <Page :total="pageData.totalRecord" show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
      </div>
  </Row>
  </div>
</template>

<script>
import { findShiList } from '@/api/eventlist'
export default {
  name: 'telnote',
  components: {
  },
  data () {
    return {
      loadData: true,
      columns6: [
        {
          title: '事项名称',
          key: 'QL_NAME'
        },
        {
          title: '总办件量',
          key: 'zong'
        },
        {
          title: '未超时数量',
          key: 'cheng'
        },
        {
          title: '超时数量',
          key: 'shi'
        }
      ],
      data5: [],
      pageData: { pageNo: 1, pageSize: 10, totalRecord: 0, name: '' }
    }
  },
  methods: {
    pageChange (ret) {
      console.log(ret)
      this.pageData.pageNo = ret
      this.getItemData()
    },
    pageSizeChange (ret) {
      this.pageData.pageSize = ret
      this.getItemData()
    },
    getItemData () {
      findShiList(this.pageData).then(ret => {
        if (ret.data.errcode === 0) {
          this.data5 = ret.data.data.results
          this.loadData = false
          this.pageData = {
            totalRecord: ret.data.data.totalRecord,
            pageSize: ret.data.data.pageSize,
            pageNo: 1
          }
        } else {
          this.loadData = true
          this.$Notice.error({ title: '事项时效列表失败', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.getItemData()
  }
}
</script>

<style>

</style>
